<div class="form-group">
    <div class="col-sm-4">
        <input  type="button" value="选择文件" id="img" /> <br>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-4">
        <img src="__public__uploads/view.png" style="border:2px solid #dddddd;" id="show_img" width="200px" >
    </div>
</div>


{foreach name="image" item="i"}
<div class="form-group">
    <div class="col-sm-5">
        <img src="__upload__{$i.local_url}" width="300px">
    </div>
</div>
{/foreach}



<div style="float:left;width:500px;">
    <div class="form-group" >
        <div class="col-sm-3">
            <label name="local_image">
                本地图片
            </label>
            <img id="local_image" src="">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-5">
            <input type="text" class="form-control" id="local_img_url">
        </div>
    </div>
</div>



<div style="float:left;width:500px;">
    <div class="form-group" >
        <div class="col-sm-3">
            <label name="qiniu_image">
                七牛图片
            </label>
            <img id="qiniu_image" src="">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-5">
            <input type="text" class="form-control" id="qiniu_img_url">
        </div>
    </div>
</div>


<div style="clear:both;">
    <form action="{:url('cut_pic/index/image_insert')}" method="post" class="form-horizontal">
        <div class="form-group">
            <div class="col-sm-2" >
                <input type="text" id="local_url" class="form-control" name="local_url">
                <input type="text" id="size" class="form-control" name="size">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2" >
                <button type="submit" >
                    添加
                </button>
            </div>
        </div>
    </form>
</div>


<div style="display:none;">
    <input type="text" id="get_title" >
</div>


<link rel="stylesheet" href="__public__static/cut_img/kindeditor/themes/default/default.css" />
<script charset="utf-8" src="__public__static/cut_img/kindeditor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="__public__static/cut_img/kindeditor/lang/zh_CN.js"></script>

<script>
    //上传原图
    KindEditor.ready(function(K) {
        var editor = K.editor({
                    uploadJson : '{:url('cut_pic/index/upload')}',
                fileManagerJson : '',
                allowFileManager : false
    });

        //function(url, title, width, height, border, align)
        //url as title ,size as width
        K('#img').click(function() {
            editor.loadPlugin('image', function() {
                editor.plugin.imageDialog({
                    imageUrl : K('#img').val(),
                    clickFn : function(url,title,width,height,border) {

                        document.getElementById('local_image').src = '__public__uploads/pre_pic/'+title;
                        document.getElementById('qiniu_image').src = 'http://'+height+'/'+width;
                        $('#local_img_url').val('__public__uploads/pre_pic/'+title);
                        $('#qiniu_img_url').val($('#qiniu_image').attr('src'));
                        $('#local_url').val(title);
                        $('#size').val(border);
                        editor.hideDialog();
                    }
                });
            });
        });
    });
</script>